<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>Menu</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="<%=request.getContextPath()%>/static/layui/layui.js" charset="utf-8"></script>
<body>
<div id="test4" class="demo-transfer"></div>

</body>
<script type="text/javascript">
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r!=null)return  unescape(r[2]); return null;
    }
    // 调用方法
    layui.use(['transfer', 'layer', 'util'], function(){
        var $ = layui.$
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,util = layui.util;
        var id = GetQueryString("id");
        var ajaxData = "id="+id;
        $.ajax({
            type:'post'
            ,data : ajaxData
            ,url:'roleCheckDate'
            ,success: function(data) {
                var check = data.map.check;
                var data1 = data.map.data;
                start(transfer,check,data1);
            }
        });

        //数据格式解
        function start(transfer,check,data1){
            transfer.render({
                elem: '#test4'
                ,showSearch: true
                ,title: ['未选中', '已选中']
                ,value: check
                ,parseData: function(res){
                    return {
                        "value": res.id //数据值
                        ,"title": res.name //数据标题
                        ,"disabled": res.disabled  //是否禁用
                        ,"checked": res.checked //是否选中
                    }
                }
                ,data: data1
                ,onchange: function(data, index){
                    $.ajax({
                        type:"post"
                        ,data:"userId="+id+"&roleId="+getID(data)+"&type="+index
                        ,url:"insertOrDelete"
                        ,success:function (data) {
                        }
                    })
                }
            })
        }
    });

    function getID(data){
        var value = [];
        for (var i = 0;i<data.length;i++){
            value[i]=data[i].value;
        }
        return value;
    }
</script>
</html>